<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Responsive Bootstrap 4 and web Application ui kit.">
<title>:: PostMan :: Chat Application</title>
<link rel="icon" href="../dist/favicon.ico" type="image/x-icon" />

<link rel="stylesheet" href="../fonts/material-icon/css/material-design-iconic-font.min.css">

<link rel="stylesheet" href="../dist/assets/css/style.min.css">

<link rel="stylesheet" href="demo.css">
<body>
<div id="layout" class="theme-cyan">

<div class="navigation navbar justify-content-center py-xl-4 py-md-3 py-0 px-3">

<a href="../dist/index.html" title="Postman" class="brand">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 46 46" fill="none">
<g id="logo-icon-color">
<path id="Vector" d="M26.4966 6.01307V2.00436L22.9746 0L19.5029 2.00436V6.01307L22.9746 8.01743L26.4966 6.01307Z" fill="#4539CF" />
<path id="Vector_2" d="M34.7989 10.8235V6.81477L31.3272 4.81042L27.8555 6.81477V10.8235L31.3272 12.8279L34.7989 10.8235Z" fill="#4539CF" />
<path id="Vector_3" d="M43 15.4837V11.4749L39.5283 9.47058L36.0063 11.4749V15.4837L39.5283 17.488L43 15.4837Z" fill="#4539CF" />
<path id="Vector_4" d="M43 25.0043V20.9956L39.5283 18.9913L36.0063 20.9956V25.0043L39.5283 27.0087L43 25.0043Z" fill="#4539CF" />
<path id="Vector_5" d="M33.9935 19.9935V16.9368L31.3269 15.4336L28.6602 16.9368V19.9935L31.3269 21.5469L33.9935 19.9935Z" fill="#4539CF" />
<path id="Vector_6" d="M33.9935 29.5142V26.4575L31.3269 24.9041L28.6602 26.4575V29.5142L31.3269 31.0174L33.9935 29.5142Z" fill="#4539CF" />
<path id="Vector_7" d="M15.931 19.6928V17.2876L13.8178 16.085L11.7549 17.2876V19.6928L13.8178 20.8453L15.931 19.6928Z" fill="#4539CF" />
<path id="Vector_8" d="M15.931 29.1634V26.7582L13.8178 25.5555L11.7549 26.7582V29.1634L13.8178 30.366L15.931 29.1634Z" fill="#4539CF" />
<path id="Vector_9" d="M6.4717 24.0022V21.9978L4.76101 20.9956L3 21.9978V24.0022L4.76101 25.0044L6.4717 24.0022Z" fill="#4539CF" />
<path id="Vector_10" d="M43 34.4749V30.4662L39.5283 28.4619L36.0063 30.4662V34.4749L39.5283 36.4793L43 34.4749Z" fill="#4539CF" />
<path id="Vector_11" d="M25.9433 15.1329V11.8758L23.1257 10.2222L20.2578 11.8758V15.1329L23.1257 16.7865L25.9433 15.1329Z" fill="#4539CF" />
<path id="Vector_12" d="M25.9433 34.1242V30.8671L23.1257 29.2135L20.2578 30.8671V34.1242L23.1257 35.7778L25.9433 34.1242Z" fill="#4539CF" />
<path id="Vector_13" d="M25.4908 24.3529V21.597L23.126 20.244L20.7109 21.597V24.3529L23.126 25.756L25.4908 24.3529Z" fill="#4539CF" />
<path id="Vector_14" d="M34.7989 39.1852V35.1765L31.3272 33.1721L27.8555 35.1765V39.1852L31.3272 41.1896L34.7989 39.1852Z" fill="#4539CF" />
<path id="Vector_15" d="M16.6856 10.2222V6.91507L13.8176 5.26147L10.9497 6.91507V10.2222L13.8176 11.8257L16.6856 10.2222Z" fill="#4539CF" />
<path id="Vector_16" d="M6.22013 12.9782V11.1242L4.61006 10.1721L3 11.1242V12.9782L4.61006 13.9303L6.22013 12.9782Z" fill="#4539CF" />
<path id="Vector_17" d="M26.4966 43.9956V39.9868L22.9746 37.9825L19.5029 39.9868V43.9956L22.9746 45.9999L26.4966 43.9956Z" fill="#4539CF" />
<path id="Vector_18" d="M16.6856 39.0849V35.7777L13.8176 34.1241L10.9497 35.7777V39.0849L13.8176 40.7385L16.6856 39.0849Z" fill="#4539CF" />
<path id="Vector_19" d="M7.5283 34.8257V32.22L5.26415 30.9172L3 32.22V34.8257L5.26415 36.1285L7.5283 34.8257Z" fill="#4539CF" />
</g>
</svg>
 </a>

<div class="nav flex-md-column nav-pills flex-grow-1" role="tablist" aria-orientation="vertical">
<a class="mb-xl-3 mb-md-2 nav-link" data-toggle="pill" href="#nav-tab-user" role="tab">
<img src="../dist/assets/images/user.png" class="avatar sm rounded-circle" alt="user avatar" />
</a>
<a class="mb-xl-3 mb-md-2 nav-link" data-toggle="pill" href="#nav-tab-chat" role="tab"><i class="zmdi zmdi-comment-alt"></i></a>
<a class="mb-xl-3 mb-md-2 nav-link" data-toggle="pill" href="#nav-tab-phone" role="tab"><i class="zmdi zmdi-phone"></i></a>
<a class="mb-xl-3 mb-md-2 nav-link" data-toggle="pill" href="#nav-tab-contact" role="tab"><i class="zmdi zmdi-account-circle"></i></a>
<a class="mb-xl-3 mb-md-2 nav-link d-none d-sm-block active" data-toggle="pill" href="#nav-tab-pages" role="tab"><i class="zmdi zmdi-layers"></i></a>
</div>

<div class="nav flex-md-column nav-pills flex-grow-2" role="tablist" aria-orientation="vertical">
<a class="mt-xl-3 mt-md-2 nav-link light-dark-toggle" href="javascript:void(0);">
<i class="zmdi zmdi-brightness-2"></i>
<input class="light-dark-btn" type="checkbox">
</a>
<a class="mt-xl-3 mt-md-2 nav-link d-none d-sm-block" href="../dist/settings.html" role="tab"><i class="zmdi zmdi-settings"></i></a>
</div>

<button type="submit" class="btn sidebar-toggle-btn shadow-sm"><i class="zmdi zmdi-menu"></i></button>
</div>


<div class="sidebar border-end py-xl-4 py-3 px-xl-4 px-3">
<div class="tab-content">

<div class="tab-pane fade" id="nav-tab-user" role="tabpanel">

<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="mb-0 text-primary">Profile</h3>
<div>
<a href="../dist/signin.html" title="" class="btn btn-dark">Sign Out</a>
</div>
</div>

<div class="form-group input-group-lg search mb-3">
<i class="zmdi zmdi-search"></i>
<i class="zmdi zmdi-dialpad"></i>
<input type="text" class="form-control" placeholder="Search...">
</div>

<div class="card border-0 text-center pt-3 mb-4">
<div class="card-body">
<div class="card-user-avatar">
<img src="../dist/assets/images/user.png" alt="avatar" />
<button type="button" class="btn btn-secondary btn-sm"><i class="zmdi zmdi-edit"></i></button>
</div>
<div class="card-user-detail mt-4">
<h5>Michelle Green</h5>
<span class="text-muted"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0964606a616c65656c276e7b6c6c67496e64686065276a6664">[email&#160;protected]</a></span>
<p>+14 123 456 789 - New york (USA)</p>
<div class="social">
<a class="icon p-2" href="#" data-toggle="tooltip" title="Facebook"><i class="zmdi zmdi-facebook-box"></i></a>
<a class="icon p-2" href="#" data-toggle="tooltip" title="Github"><i class="zmdi zmdi-github-box"></i></a>
<a class="icon p-2" href="#" data-toggle="tooltip" title="Linkedin"><i class="zmdi zmdi-linkedin-box"></i></a>
<a class="icon p-2" href="#" data-toggle="tooltip" title="Instagram"><i class="zmdi zmdi-instagram"></i></a>
</div>
</div>
</div>
 </div>

<div class="card border-0">
<ul class="list-group custom list-group-flush">

<li class="list-group-item d-flex justify-content-between align-items-center">
<span>Color scheme</span>
<ul class="choose-skin list-unstyled mb-0">
<li data-theme="indigo" data-toggle="tooltip" title="Theme-Indigo"><div class="indigo"></div></li>
<li class="active" data-theme="cyan" data-toggle="tooltip" title="Theme-Cyan"><div class="cyan"></div></li>
<li data-theme="green" data-toggle="tooltip" title="Theme-Green"><div class="green"></div></li>
<li data-theme="blush" data-toggle="tooltip" title="Theme-Blush"><div class="blush"></div></li>
<li data-theme="dark" data-toggle="tooltip" title="Theme-Dark"><div class="dark"></div></li>
</ul>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>Desktop notifications</span>
<label class="c_checkbox">
<input type="checkbox" checked="">
<span class="checkmark"></span>
</label>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
<span>Sound notifications</span>
<label class="c_checkbox">
<input type="checkbox">
<span class="checkmark"></span>
</label>
</li>
<li class="list-group-item border-0 mt-2">
<a class="link" href="#"><i class="zmdi zmdi-chevron-right me-2"></i> Need Help? Let's chat</a>
</li>
<li class="list-group-item border-0">
<a class="link" href="#"><i class="zmdi zmdi-chevron-right me-2"></i> Knowledgebase</a>
</li>
<li class="list-group-item border-0">
<a class="link" href="#"><i class="zmdi zmdi-chevron-right me-2"></i> english (United States)</a>
</li>
<li class="list-group-item mb-2">
<a class="link" href="#"><i class="zmdi zmdi-chevron-right me-2"></i> Browser & App Sessions</a>
</li>
</ul>

<div class="card-body text-center border-top">
<button type="button" class="btn btn-secondary">Update Profile</button>
</div>
</div>
</div>

<div class="tab-pane fade" id="nav-tab-chat" role="tabpanel">

<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="mb-0 text-primary">Chat</h3>
<div>
<button class="btn btn-dark" type="button">New Chat</button>
</div>
</div>

<div class="form-group input-group-lg search mb-3">
<i class="zmdi zmdi-search"></i>
<i class="zmdi zmdi-dialpad"></i>
<input type="text" class="form-control" placeholder="Search...">
</div>

<ul class="chat-list">
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
<span>RECENT CHATS</span>
<div class="dropdown">
<a class="btn btn-link px-1 py-0 border-0 text-muted dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="zmdi zmdi-filter-list"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
<li class="online">
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="../dist/single-chat.html" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Jason Porter</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
</div>
<div class="text-truncate">It is a long established fact that a reader w...</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="../dist/group-chat.html" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<div class="avatar rounded-circle no-image timber">
<span>UD</span>
</div>
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">UI-Design Group</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
</div>
 <div class="text-truncate">
<i class="zmdi zmdi-file-text me-1"></i> It is a long established fact that a reader w...
<div class="avatar-list avatar-list-stacked mt-1">
<img class="avatar xs rounded" src="../dist/assets/images/xs/avatar5.jpg" data-toggle="tooltip" data-placement="top" title="Sean">
<img class="avatar xs rounded" src="../dist/assets/images/xs/avatar6.jpg" data-toggle="tooltip" data-placement="top" title="Martin">
<img class="avatar xs rounded" src="../dist/assets/images/xs/avatar1.jpg" data-toggle="tooltip" data-placement="top" title="Terry">
<img class="avatar xs rounded" src="../dist/assets/images/xs/avatar4.jpg" data-toggle="tooltip" data-placement="top" title="Michelle">
</div>
</div>
</div>
</div>
</div>
</a>
</li>
<li class="away">
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="../dist/single-chat-2.html" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar1.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Michelle Green</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
</div>
<div class="text-truncate">What Can i do right now?</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar2.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1"> 
<h6 class="text-truncate mb-0 me-auto">Elizabeth Martin <span class="badge badge-info">4</span></h6>
<p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
</div>
<div class="text-truncate"><i class="zmdi zmdi-file-text me-1"></i> It is a long established fact that a reader w...</div>
</div>
</div>
</div>
</a>
</li>
<li class="online">
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar3.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">David Wallace</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
</div>
<div class="text-truncate">
<div class="wave">
<span class="dot"></span>
<span class="dot"></span>
<span class="dot"></span>
</div>
</div>
</div>
</div>
</div>
</a>
</li>
<li class="away">
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar4.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Sean Black</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
</div>
 <div class="text-truncate"><i class="zmdi zmdi-phone-end me-1"></i> It is a long established fact that a reader w...</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar6.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Terry Carter</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">16-07-2020</p>
</div>
<div class="text-truncate">Hello, Terry are you there?</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<div class="avatar rounded-circle no-image cyan">
<span>MS</span>
</div>
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Michelle Schultz</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">13-07-2020</p>
</div>
<div class="text-truncate">
<i class="zmdi zmdi-file-text me-1"></i> Meeting start in 20min please be ready...
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
 <button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<div class="avatar rounded-circle no-image green">
<span>RG</span>
</div>
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">React Group</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
</div>
<div class="text-truncate">
It is a long established fact that a reader w...
<div class="avatar-list avatar-list-stacked mt-1">
<img class="avatar xs rounded" src="../dist/assets/images/xs/avatar7.jpg" data-toggle="tooltip" data-placement="top" title="Sean">
<img class="avatar xs rounded" src="../dist/assets/images/xs/avatar8.jpg" data-toggle="tooltip" data-placement="top" title="Martin">
</div>
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar6.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Terry Carter</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">16-07-2020</p>
</div>
<div class="text-truncate">Hello, Terry are you there?</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<div class="avatar rounded-circle no-image cyan">
<span>MS</span>
</div>
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Michelle Schultz</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">13-07-2020</p>
</div>
<div class="text-truncate">
<i class="zmdi zmdi-file-text me-1"></i> Meeting start in 20min please be ready...
</div>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>

<div class="tab-pane fade" id="nav-tab-phone" role="tabpanel">

<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="mb-0 text-primary">Call</h3>
<div>
<button class="btn btn-dark" type="button">New Call</button>
</div>
</div>

<div class="form-group input-group-lg search mb-3">
<i class="zmdi zmdi-search"></i>
<i class="zmdi zmdi-dialpad"></i>
<input type="text" class="form-control" placeholder="Search...">
</div>

<ul class="chat-list">
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
<span>RECENT CALL</span>
<div class="dropdown">
<a class="btn btn-link px-1 py-0 border-0 text-muted dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar10.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Michelle Green</h6>
</div>
<div class="text-truncate">
<i class="zmdi zmdi-phone-missed me-1"></i> Yesterday at 6:08 PM
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar9.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Jane Hunt</h6>
</div>
<div class="text-truncate">
<i class="zmdi zmdi-phone-missed me-1"></i> Yesterday at 6:08 PM
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar8.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Susie Willis</h6>
</div>
<div class="text-truncate">
<i class="zmdi zmdi-phone-missed me-1"></i> Yesterday at 6:08 PM
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
 <button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar1.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Marshall Nichols</h6>
</div>
<div class="text-truncate">
<i class="zmdi zmdi-phone-forwarded me-1"></i> Yesterday at 6:08 PM
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar8.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Jason Porter</h6>
</div>
<div class="text-truncate">
<i class="zmdi zmdi-phone-missed me-1"></i> Yesterday at 6:08 PM
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar1.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
 <div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Darryl Day</h6>
</div>
<div class="text-truncate">
<i class="zmdi zmdi-phone-forwarded me-1"></i> Yesterday at 6:08 PM
</div>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>

<div class="tab-pane fade" id="nav-tab-contact" role="tabpanel">

<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="mb-0 text-primary">Contact</h3>
<div>
<button class="btn btn-dark" type="button" data-toggle="modal" data-target="#InviteFriends">Invite Friends</button>
</div>
</div>

<div class="form-group input-group-lg search mb-3">
<i class="zmdi zmdi-search"></i>
<i class="zmdi zmdi-dialpad"></i>
<input type="text" class="form-control" placeholder="Search...">
</div>

<ul class="chat-list">
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
<span>A</span>
<div class="dropdown">
<a class="btn btn-link px-1 py-0 border-0 text-muted dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar1.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Amelia Green</h6>
</div>
<div class="text-truncate">
last seen 2 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar3.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Ava Green</h6>
</div>
<div class="text-truncate">
last seen 1 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
<span>C</span>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar4.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Charlotte Green</h6>
</div>
<div class="text-truncate">
last seen 6 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
 <div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Chloe Green</h6>
</div>
<div class="text-truncate">
last seen 3 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar6.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Charles Green</h6>
</div>
<div class="text-truncate">
last seen 2 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
<span>D</span>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar4.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">David Green</h6>
</div>
<div class="text-truncate">
last seen 6 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
<span>M</span>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar8.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Michael Green</h6>
</div>
<div class="text-truncate">
last seen 6 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar8.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Mohammad</h6>
</div>
<div class="text-truncate">
last seen 6 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
<li class="header d-flex justify-content-between ps-3 pe-3 mb-1">
<span>T</span>
</li>
<li>
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar9.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Tommy Green</h6>
</div>
<div class="text-truncate">
last seen 6 hours ago
</div>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>

<div class="tab-pane fade show active" id="nav-tab-pages" role="tabpanel">

<div class="d-flex justify-content-between align-items-center mb-4">
<h3 class="mb-0 text-primary">Document</h3>
</div>

<div class="card border-0">
<ul class="py-xl-4 mb-0 docs-heading">
<li class="py-2"><a href="#Introduction">Introduction</a></li>
<li class="py-2"><a href="#Whatincluded">What’s included</a></li>
<li class="py-2"><a href="#Gettingstarted">Getting started</a></li>
<li class="py-2"><a href="#Gulpfiles">Gulpfiles.js</a></li>
<li class="py-2"><a href="#Gruntfile">Gruntfile.js</a></li>
<li class="py-2"><a href="#MainContent">Main Content</a></li>
<li class="py-2"><a href="#ProjectComponents">Project Components</a></li>
<li class="py-2"><a href="#Chatbody">Chat Body</a></li>
<li class="py-2"><a href="#Credits">Credits</a></li>
<li class="py-2"><a href="#CustomerSupport">Customer Support</a></li>
<li class="py-2"><a href="#ChangeLog">Change Log</a></li>
</ul>
</div>
</div>
</div>
</div>


<div class="main px-xl-5 px-lg-4 px-3">

<div class="chat-body">

<div class="chat-header border-bottom py-xl-4 py-md-3 py-2">
<div class="container-xxl">
<div class="row align-items-center">

<div class="col-6 col-xl-6">
<div class="media">
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Document</h6>
</div>
<div class="text-truncate">Last update: 07-Sept-2020</div>
</div>
</div>
</div>

<div class="col-6 col-xl-6 text-end">
<a href="https://getbootstrap.com/docs/4.5/getting-started/introduction/" target="_blank" class="btn btn-secondary">Get started Bootstrap</a>
</div>
</div>
</div>
</div>

<div class="chat-content py-lg-4">
<div class="container-xxl">

<div class="col-12 px-0">
<div class="card mb-4" id="Introduction">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">Introduction</h6>
 </div>
<div class="card-body">
<p>Hey !! This is a document for our template POSTMAN:THE CHAT APP. We appreciate your interest in our template and Thank you !! for purchase. We have designed and built an Awesome UI:UX chat app which will make your customer chat even more with simplicity. Lets me share in more details.:</p>
<p>We have built on bootstrap so it will be easy to use if you are familiar with it. And if not then also our document will make it simple for you. We have incorporated an easy to use built in tool and document with all required details included.</p>
<p>Since this theme is based on Bootstrap, and includes nearly everything Bootstrap itself does, you’ll want to give the official project documentation a once over before continuing. There’s also the kitchen sink—a one-page view of all Bootstrap’s components restyled by this theme.</p>
<p>For everything else, including compiling and using this Bootstrap theme, read through the docs below.</p>
<p>Thanks, and enjoy!</p>
</div>
</div>
</div>

<div class="col-12 px-0">
<div class="card mb-4" id="Whatincluded">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">What’s included</h6>
</div>
<div class="card-body">
<p>Below you will find all the file and required documentation of our Postman Chat Theme. We have included all directories and files, common resources and compiled and minified files as some raw file which will be required for your future use.</p>
<ul class="file-structure">
<li>
<span>PostMan /</span>
<ul>
<li>
<span>dist /</span>
<ul>
<li>
<span>assets /</span>
<ul>
<li>css /</li>
<li>images /</li>
<li>vendor /</li>
</ul>
</li>
<li>index.html</li>
</ul>
</li>
<li>
<span>doc /</span>
<ul>
<li>
index.html
</li>
</ul>
</li>
<li>fonts /</li>
<li>
<span>js /</span>
<ul>
<li>calendar.js</li>
<li>index.js</li>
<li>template.js</li>
 </ul>
</li>
<li>
<span>scss /</span>
<ul>
<li>base /</li>
<li>bootstrap /</li>
<li>font /</li>
<li>mixins /</li>
<li>plugin /</li>
<li>style.scss</li>
</ul>
</li>
<li>Gruntfile.js</li>
<li>.gitignore</li>
<li>package.json</li>
<li>package-lock.json</li>
<li>README.md</li>
</ul>
</li>
</ul>
<table class="table table-bordered mt-4">
<thead>
<tr>
<th colspan="2">File Reference</th>
</tr>
</thead>
<tbody>
<tr>
<td>doc/index.html</td>
<td>Online documentation</td>
</tr>
<tr>
<td class="wd-30p">index.html</td>
<td class="wd-70p">Landing page</td>
</tr>
<tr>
<td>_variables.scss</td>
<td>All variables</td>
</tr>
<tr>
<td>_core.scss</td>
<td>Create scss variables color code</td>
</tr>
<tr>
<td>Gruntfile.js</td>
<td>Compile scss to css and create js bundles</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<div class="col-12 px-0">
<div class="card mb-4" id="Gettingstarted">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">Getting started</h6>
</div>
<div class="card-body">
<p>At the top level of your bootstrap theme you’ll find a directory for each major Bootstrap version that’s supported (currently both v3 and v4). Within each directory you have all the relevant files for that version.</p>
<p>To view your Bootstrap Theme documentation, simply find the docs directory and open index.html in your favorite browser.</p>
<p><strong>$ open index.html</strong></p>
</div>
</div>
</div>

<div class="col-12 px-0">
<div class="card mb-4" id="Gulpfiles">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">Gulpfiles.js</h6>
</div>
<div class="card-body">
<p>If you’re after more customization we’ve also included a custom <a href="https://gulpjs.com/" target="_blank">Gulp</a> file, which can be used to quickly re-compile a theme’s CSS and JS. You’ll need to install both <a href="https://nodejs.org/en/download/" target="_blank">Node</a> and Gulp before using our included “gulpfile.js”.</p>
<p>Once node is installed, run the following npm command to install Gulp.</p>
<ul class="list-group mb-4">
<li class="list-group-item list-group-item-success">$ npm install gulp -g or </li>
<li class="list-group-item">To install Glup into your project devDependencies.</li>
<li class="list-group-item list-group-item-warning">$ npm install --save-dev gulp</li>
<li class="list-group-item">When you’re done, make sure you’ve installed the rest of the theme’s dependencies:</li>
<li class="list-group-item list-group-item-warning">$ npm install</li>
</ul>
<p><strong>Gulp Sass:</strong> Run Gulp sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `scss/style.scss` and output a plain-css file to `/assets/css/filename.css`.</p>
<p>Now, modify your source files and run “gulp” to generate new local “dist/” files automatically. <strong>Be aware that this replaces existing “dist/” files</strong>, so proceed with caution.</p>
</div>
</div>
</div>

<div class="col-12 px-0">
<div class="card mb-4" id="Gruntfile">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">Gruntfile.js</h6>
</div>
<div class="card-body">
<p>If you’re after more customization we’ve also included a custom <a href="https://gruntjs.com/" target="_blank">Grunt</a> file, which can be used to quickly re-compile a theme’s CSS and JS. You’ll need to install both <a href="https://nodejs.org/en/download/" target="_blank">Node</a> and Grunt before using our included “gruntfile.js”.</p>
<p>Once node is installed, run the following npm command to install Grunt.</p>
<ul class="list-group mb-4">
<li class="list-group-item list-group-item-success">$ npm install -g grunt-cli or</li>
<li class="list-group-item">To install Grunt into your project devDependencies.</li>
<li class="list-group-item list-group-item-danger">$ npm install grunt --save-dev</li>
<li class="list-group-item">When you’re done, make sure you’ve installed the rest of the theme’s dependencies:</li>
<li class="list-group-item list-group-item-danger">$ npm install</li>
</ul>
<p><strong>Grunt Sass:</strong> Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file `scss/style.scss` and output a plain-css file to `/assets/css/filename.css`.</p>
<p>Now, modify your source files and run “gulp” to generate new local “dist/” files automatically. <strong>Be aware that this replaces existing “dist/” files</strong>, so proceed with caution.</p>
</div>
</div>
</div>

<div class="col-12 px-0">
<div class="card mb-4">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">Theme source code</h6>
</div>
<div class="card-body">
<p>The “scss/”, “js/”, and “fonts/” directories contain the source code for our CSS, JS, and icon fonts (respectively). Within the “scss/” and “js/” directories you’ll find two subdirectories:</p>
<ul class="mb-4">
<li>bootstrap/”, which contains the most recently released version of Bootstrap (v4.0.0).</li>
<li>“dist/” folder includes everything above, built into single CSS and JS files that can easily be integrated into your project.</li>
</ul>
<p>The “docs/” folder includes the source code for our documentation, as well as a handful of live examples.</p>
<p>The remaining files not specifically mentioned above provide support for packages, license information, and development.</p>
</div>
</div>
</div>

<div class="col-12 px-0">
<div class="card mb-4">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">Gulp/Grunt Files</h6>
</div>
<div class="card-body">
<p>Leverage the included source files and “gulpfile.js” or “gruntfile.js” to customize your Bootstrap Theme for your exact needs. Change variables, exclude components, and more.</p>
<ul class="mb-4">
<li class="text-danger">“scss/base/” folder has custom files, Edit it to build your own custom build, simply modify your local custom files or edit the includes listed here. Note: some themes also rely on a shared style.scss file, which you can find imported.</li>
<li>“variables.scss” is home to your theme’s variables. Note that your theme’s variables file depends on and overrides an existing Bootstrap variable file (found in /scss/base/_variables.scss).</li>
</ul>
</div>
</div>
</div>

<div class="col-12 px-0">
<div class="card mb-4" id="MainContent">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">Main Content</h6>
</div>
<div class="card-footer">
<pre><code class="language-html">
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, shrink-to-fit=no&quot;&gt;
&lt;meta name=&quot;description&quot; content=&quot;Responsive Bootstrap 4 and web Application ui kit.&quot;&gt;

&lt;title&gt;:: PostMan :: Chat Application&lt;/title&gt;
&lt;link rel=&quot;icon&quot; href=&quot;favicon.ico&quot; type=&quot;image/x-icon&quot;/&gt;
&lt;!-- Material Design Iconic Font --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../fonts/material-icon/css/material-design-iconic-font.min.css&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css&quot;&gt;

&lt;!-- MAIN CSS --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/css/style.min.css&quot;&gt;

&lt;body&gt;

&lt;div id=&quot;layout&quot; class=&quot;theme-cyan&quot;&gt;

    &lt;!-- Navbar --&gt;
    &lt;div class=&quot;navigation navbar justify-content-center py-xl-4 py-md-3 py-0 px-3&quot;&gt;
    &lt;/div&gt;
    &lt;!-- End Navbar --&gt;

    &lt;!-- Sidebar --&gt;
    &lt;div class=&quot;sidebar border-end py-xl-4 py-3 px-xl-4 px-3&quot;&gt;        
    &lt;/div&gt;
    &lt;!-- End Sidebar --&gt;

    &lt;!-- Rightbar icon menu --&gt;
    &lt;div class=&quot;rightbar d-none d-md-block&quot;&gt;
    &lt;/div&gt;
    &lt;!-- End Rightbar icon menu --&gt;

    &lt;!-- Main Body: Content --&gt;
    &lt;div class=&quot;main px-xl-5 px-lg-4 px-3&quot;&gt;

        &lt;!-- Chat: Body --&gt;
        &lt;div class=&quot;chat-body&quot;&gt;

            &lt;!-- Chat: Header --&gt;
            &lt;div class=&quot;chat-header border-bottom py-xl-4 py-md-3 py-2&quot;&gt;
            &lt;/div&gt;

            &lt;!-- Chat: Search --&gt;
            &lt;div class=&quot;collapse&quot; id=&quot;chat-search-div&quot;&gt;
            &lt;/div&gt;

            &lt;!-- Chat: Content--&gt;
            &lt;div class=&quot;chat-content&quot;&gt;
            &lt;/div&gt;

            &lt;!-- Chat: Footer --&gt;
            &lt;div class=&quot;chat-footer border-top py-xl-4 py-lg-2 py-2&quot;&gt;
            &lt;/div&gt;

        &lt;/div&gt;
        &lt;!-- End chat body --&gt;

        &lt;!-- Chat: user details --&gt;
        &lt;div class=&quot;user-detail-sidebar py-xl-4 py-3 px-xl-4 px-3&quot;&gt;
        &lt;/div&gt;

        &lt;!-- Chat: add new user to create a group chat --&gt;
        &lt;div class=&quot;addnew-user-sidebar py-xl-4 py-3 px-xl-4 px-3&quot;&gt;
        &lt;/div&gt;
        
    &lt;/div&gt;
    &lt;!-- Main Body: Content --&gt;

&lt;/div&gt;

&lt;!-- Main jQuery js Bootstrap core js file --&gt;
&lt;script src=&quot;assets/vendor/jquery/jquery-3.5.1.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;assets/vendor/bootstrap/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- Plugin js file --&gt;
&lt;script src=&quot;assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- Project core file --&gt;
&lt;script src=&quot;../js/template.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;    
</code></pre>
</div>
</div>
</div>

<div class="col-12 px-0">
<div class="card mb-4" id="ProjectComponents">
<div class="card-header">
<h6 class="card-title mb-1 font-weight-bold">Project Components</h6>
</div>
<div class="card-body">
<h3>Buttons</h3>
<p>Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.</p>
<div>
 <button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button class="btn btn-dark" type="button">Dark</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
</div>
</div>
<div class="card-footer">
<pre><code class="language-html">
&lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot;&gt;Secondary&lt;/button&gt;
&lt;button class=&quot;btn btn-dark&quot; type=&quot;button&quot;&gt;Dark&lt;/button&gt;

&lt;button type=&quot;button&quot; class=&quot;btn btn-success&quot;&gt;Success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-light&quot;&gt;Light&lt;/button&gt;
</code></pre></div>
<div class="card-body">
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
</div>
<div class="card-footer">
<pre><code class="language-html">
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-primary&quot;&gt;Primary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-secondary&quot;&gt;Secondary&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-dark&quot;&gt;Dark&lt;/button&gt;

&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-success&quot;&gt;Success&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-danger&quot;&gt;Danger&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-warning&quot;&gt;Warning&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-info&quot;&gt;Info&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-light&quot;&gt;Light&lt;/button&gt;
</code></pre></div>
<div class="card-body">
<h5 class="mt-5">Social Button</h5>
<button type="button" class="btn btn-outline-google">Signup with Google</button>
<button type="button" class="btn btn-outline-facebook">Signup with Facebook</button>
</div>
<div class="card-footer">
<pre><code class="language-html">
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-google&quot;&gt;Signup with Google&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-outline-facebook&quot;&gt;Signup with Facebook&lt;/button&gt;
</code></pre>
</div>
<div class="card-body">
<h3>Widgets</h3>
<ul class="chat-list">
<li class="online">
<div class="hover_action">
<button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
<button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
<button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
</div>
<a href="#" class="card">
<div class="card-body">
<div class="media">
<div class="avatar me-3">
<span class="status rounded-circle"></span>
<img class="avatar rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
</div>
<div class="media-body overflow-hidden">
<div class="d-flex align-items-center mb-1">
<h6 class="text-truncate mb-0 me-auto">Jason Porter</h6>
<p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
</div>
<div class="text-truncate">It is a long established fact that a reader w...</div>
</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<div class="card-footer"><pre><code class="language-html">
&lt;ul class=&quot;chat-list&quot;&gt;
    &lt;li class=&quot;online&quot;&gt;
        &lt;div class=&quot;hover_action&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-link text-info&quot;&gt;&lt;i class=&quot;zmdi zmdi-eye&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-link text-warning&quot;&gt;&lt;i class=&quot;zmdi zmdi-star&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-link text-danger&quot;&gt;&lt;i class=&quot;zmdi zmdi-delete&quot;&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;a href=&quot;#&quot; class=&quot;card&quot;&gt;
            &lt;div class=&quot;card-body&quot;&gt;
                &lt;div class=&quot;media&quot;&gt;
                    &lt;div class=&quot;avatar me-3&quot;&gt;
                        &lt;span class=&quot;status rounded-circle&quot;&gt;&lt;/span&gt;
                        &lt;img class=&quot;avatar rounded-circle&quot; src=&quot;assets/images/xs/avatar5.jpg&quot; alt=&quot;avatar&quot;&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;media-body overflow-hidden&quot;&gt;
                        &lt;div class=&quot;d-flex align-items-center mb-1&quot;&gt;
                            &lt;h6 class=&quot;text-truncate mb-0 me-auto&quot;&gt;Jason Porter&lt;/h6&gt;
                            &lt;p class=&quot;small text-muted text-nowrap ms-4 mb-0&quot;&gt;11:08 am&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;text-truncate&quot;&gt;It is a long established fact that a reader w...&lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code>
                            </div>

                            <div class="card-body">
                                <ul class="chat-list">
                                    <li>
                                        <div class="hover_action">
                                            <button type="button" class="btn btn-link text-info"><i class="zmdi zmdi-eye"></i></button>
                                            <button type="button" class="btn btn-link text-warning"><i class="zmdi zmdi-star"></i></button>
                                            <button type="button" class="btn btn-link text-danger"><i class="zmdi zmdi-delete"></i></button>
                                        </div>
                                        <a href="#" class="card">
                                            <div class="card-body">
                                                <div class="media">
                                                    <div class="avatar me-3">
                                                        <span class="status rounded-circle"></span>
                                                        <div class="avatar rounded-circle no-image timber">
                                                            <span>UD</span>
                                                        </div>
                                                    </div>
                                                    <div class="media-body overflow-hidden">
                                                        <div class="d-flex align-items-center mb-1">
                                                            <h6 class="text-truncate mb-0 me-auto">UI-Design Group</h6>
                                                            <p class="small text-muted text-nowrap ms-4 mb-0">11:08 am</p>
                                                        </div>
                                                        <div class="text-truncate">
                                                            <i class="zmdi zmdi-file-text me-1"></i> It is a long established fact that a reader w...
                                                            <div class="avatar-list avatar-list-stacked mt-1">
                                                                <img class="avatar xs rounded" src="../dist/assets/images/xs/avatar5.jpg" data-toggle="tooltip" data-placement="top" title="" data-original-title="Sean">
                                                                <img class="avatar xs rounded" src="../dist/assets/images/xs/avatar6.jpg" data-toggle="tooltip" data-placement="top" title="" data-original-title="Martin">
                                                                <img class="avatar xs rounded" src="../dist/assets/images/xs/avatar1.jpg" data-toggle="tooltip" data-placement="top" title="" data-original-title="Terry">
                                                                <img class="avatar xs rounded" src="../dist/assets/images/xs/avatar4.jpg" data-toggle="tooltip" data-placement="top" title="" data-original-title="Michelle">
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                            <div class="card-footer">
<pre><code class="language-html">
&lt;ul class=&quot;chat-list&quot;&gt;
    &lt;li&gt;
        &lt;div class=&quot;hover_action&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-link text-info&quot;&gt;&lt;i class=&quot;zmdi zmdi-eye&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-link text-warning&quot;&gt;&lt;i class=&quot;zmdi zmdi-star&quot;&gt;&lt;/i&gt;&lt;/button&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-link text-danger&quot;&gt;&lt;i class=&quot;zmdi zmdi-delete&quot;&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;a href=&quot;group-chat.html&quot; class=&quot;card&quot;&gt;
            &lt;div class=&quot;card-body&quot;&gt;
                &lt;div class=&quot;media&quot;&gt;
                    &lt;div class=&quot;avatar me-3&quot;&gt;
                        &lt;span class=&quot;status rounded-circle&quot;&gt;&lt;/span&gt;
                        &lt;div class=&quot;avatar rounded-circle no-image timber&quot;&gt;
                            &lt;span&gt;UD&lt;/span&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;media-body overflow-hidden&quot;&gt;
                        &lt;div class=&quot;d-flex align-items-center mb-1&quot;&gt;
                            &lt;h6 class=&quot;text-truncate mb-0 me-auto&quot;&gt;UI-Design Group&lt;/h6&gt;
                            &lt;p class=&quot;small text-muted text-nowrap ms-4 mb-0&quot;&gt;11:08 am&lt;/p&gt;
                        &lt;/div&gt;
                        &lt;div class=&quot;text-truncate&quot;&gt;
                            &lt;i class=&quot;zmdi zmdi-file-text me-1&quot;&gt;&lt;/i&gt; It is a long established fact that a reader w...
                            &lt;div class=&quot;avatar-list avatar-list-stacked mt-1&quot;&gt;
                                &lt;img class=&quot;avatar xs rounded&quot; src=&quot;assets/images/xs/avatar5.jpg&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Sean&quot;&gt;
                                &lt;img class=&quot;avatar xs rounded&quot; src=&quot;assets/images/xs/avatar6.jpg&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Martin&quot;&gt;
                                &lt;img class=&quot;avatar xs rounded&quot; src=&quot;assets/images/xs/avatar1.jpg&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Terry&quot;&gt;
                                &lt;img class=&quot;avatar xs rounded&quot; src=&quot;assets/images/xs/avatar4.jpg&quot; data-toggle=&quot;tooltip&quot; data-placement=&quot;top&quot; title=&quot;&quot; data-original-title=&quot;Michelle&quot;&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/a&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code>
                            </div>
                                <div class="mb-5">
                                    <h5>Calendar</h5>
<pre><code class="language-html">
&lt;!-- calendar Plugin css file --&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;assets/vendor/bootstrap-datepicker/css/bootstrap-datepicker.min.css&quot;&gt;

&lt;div class=&quot;body mt-4&quot;&gt;
    &lt;div id=&quot;mini-calendar&quot;&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;!-- calendar Plugin js file --&gt;
&lt;script src=&quot;assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js&quot;&gt;&lt;/script&gt;

&lt;!-- calendar page js file --&gt;
&lt;script&gt;
    // mini calendar js 
    $('#mini-calendar').datepicker({
        todayHighlight: true,
        beforeShowDay: function(date){
            if (date.getMonth() == (new Date()).getMonth())
                switch (date.getDate()){
                case 4:
                    return {
                    tooltip: 'Example tooltip',
                    classes: 'active'
                    };
                case 8:
                    return false;
                case 12:
                    return &quot;green&quot;;
            }
        }
    });
&lt;/script&gt;</code>
                                </div>
                                <div class="mb-5 add-note">
                                    <h5>My Notes</h5>
                                    <ul class="list-unstyled">
                                        <li class="card border-0 mb-2">
                                            <span>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</span>
                                            <button class="btn btn-sm btn-link"><i class="zmdi zmdi-delete text-danger"></i></button>
                                        </li>
                                    </ul>
<pre><code class="language-html">
&lt;ul class=&quot;list-unstyled&quot;&gt;
    &lt;li class=&quot;card border-0 mb-2&quot;&gt;
        &lt;span&gt;It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.&lt;/span&gt;
        &lt;button class=&quot;btn btn-sm btn-link&quot;&gt;&lt;i class=&quot;zmdi zmdi-delete text-danger&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code>
                                </div>
                                <div class="mb-5">
                                    <h5>My Notes</h5>
                                    <ul class="list-unstyled todo-list-items">
                                        <li>
                                            <label class="c_checkbox">
                                                <input type="checkbox">
                                                <span class="checkmark"></span>
                                                <span class="ms-2">Update new code on github</span>
                                            </label>
                                            <button class="btn btn-sm btn-link" type="submit"><i class="zmdi zmdi-delete"></i></button>
                                        </li>
                                        <li>
                                            <label class="c_checkbox">
                                                <input type="checkbox">
                                                <span class="checkmark"></span>
                                                <span class="ms-2">Meeting with design team and updates</span>
                                            </label>
                                            <button class="btn btn-sm btn-link" type="submit"><i class="zmdi zmdi-delete"></i></button>
                                        </li>
                                        <li>
                                            <label class="c_checkbox">
                                                <input type="checkbox">
                                                <span class="checkmark"></span>
                                                <span class="ms-2">Send project zip file to developer</span>
                                            </label>
                                            <button class="btn btn-sm btn-link" type="submit"><i class="zmdi zmdi-delete"></i></button>
                                        </li>
                                        <li>
                                            <label class="c_checkbox">
                                                <input type="checkbox">
                                                <span class="checkmark"></span>
                                                <span class="ms-2">Create new design psd for onepage</span>
                                            </label>
                                            <button class="btn btn-sm btn-link" type="submit"><i class="zmdi zmdi-delete"></i></button>
                                        </li>
                                    </ul>
<pre><code class="language-html">
&lt;ul class=&quot;list-unstyled todo-list-items&quot;&gt;
    &lt;li&gt;
        &lt;label class=&quot;c_checkbox&quot;&gt;
            &lt;input type=&quot;checkbox&quot;&gt;
            &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;ms-2&quot;&gt;Update new code on github&lt;/span&gt;
        &lt;/label&gt;
        &lt;button class=&quot;btn btn-sm btn-link&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;zmdi zmdi-delete&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;label class=&quot;c_checkbox&quot;&gt;
            &lt;input type=&quot;checkbox&quot;&gt;
            &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;ms-2&quot;&gt;Meeting with design team and updates&lt;/span&gt;
        &lt;/label&gt;
        &lt;button class=&quot;btn btn-sm btn-link&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;zmdi zmdi-delete&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;label class=&quot;c_checkbox&quot;&gt;
            &lt;input type=&quot;checkbox&quot;&gt;
            &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;ms-2&quot;&gt;Send project zip file to developer&lt;/span&gt;
        &lt;/label&gt;
        &lt;button class=&quot;btn btn-sm btn-link&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;zmdi zmdi-delete&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/li&gt;
    &lt;li&gt;
        &lt;label class=&quot;c_checkbox&quot;&gt;
            &lt;input type=&quot;checkbox&quot;&gt;
            &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
            &lt;span class=&quot;ms-2&quot;&gt;Create new design psd for onepage&lt;/span&gt;
        &lt;/label&gt;
        &lt;button class=&quot;btn btn-sm btn-link&quot; type=&quot;submit&quot;&gt;&lt;i class=&quot;zmdi zmdi-delete&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/li&gt;
&lt;/ul&gt;</code>
                                </div>
                                <div class="mb-5">
                                    <h5>User Card</h5>
                                    <div class="bg-primary p-4">
                                        <div class="card border-0 text-center pt-3 mb-4" style="width: 300px;">
                                            <div class="card-body">
                                                <div class="card-user-avatar">
                                                    <img src="../dist/assets/images/user.png" alt="avatar">
                                                    <button type="button" class="btn btn-secondary btn-sm"><i class="zmdi zmdi-edit"></i></button>
                                                </div>
                                                <div class="card-user-detail mt-4">
                                                    <h5>Michelle Green</h5>
                                                    <span class="text-muted"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7daded4dfd2dbdbd299d0c5d2d2d9f7d0dad6dedb99d4d8da">[email&#160;protected]</a></span>
                                                    <p>+14 123 456 789 - New york (USA)</p>
                                                    <div class="social">
                                                        <a class="icon p-2" href="#" data-toggle="tooltip" title="" data-original-title="Facebook"><i class="zmdi zmdi-facebook-box"></i></a>
                                                        <a class="icon p-2" href="#" data-toggle="tooltip" title="" data-original-title="Github"><i class="zmdi zmdi-github-box"></i></a>
                                                        <a class="icon p-2" href="#" data-toggle="tooltip" title="" data-original-title="Linkedin"><i class="zmdi zmdi-linkedin-box"></i></a>
                                                        <a class="icon p-2" href="#" data-toggle="tooltip" title="" data-original-title="Instagram"><i class="zmdi zmdi-instagram"></i></a>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
<pre><code class="language-html">
&lt;div class=&quot;card border-0 text-center pt-3 mb-4&quot;&gt;
    &lt;div class=&quot;card-body&quot;&gt;
        &lt;div class=&quot;card-user-avatar&quot;&gt;
            &lt;img src=&quot;assets/images/user.png&quot; alt=&quot;avatar&quot;&gt;
            &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary btn-sm&quot;&gt;&lt;i class=&quot;zmdi zmdi-edit&quot;&gt;&lt;/i&gt;&lt;/button&gt;
        &lt;/div&gt;
        &lt;div class=&quot;card-user-detail mt-4&quot;&gt;
            &lt;h4&gt;Michelle Green&lt;/h4&gt;
            &lt;span class=&quot;text-muted&quot;&gt;<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81ece8e2e9e4edede4afe6f3e4e4efc1e6ece0e8edafe2eeec">[email&#160;protected]</a>&lt;/span&gt;
            &lt;p&gt;+14 123 456 789 - New york (USA)&lt;/p&gt;
            &lt;div class=&quot;social&quot;&gt;
                &lt;a class=&quot;icon p-2&quot; href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;&quot; data-original-title=&quot;Facebook&quot;&gt;&lt;i class=&quot;zmdi zmdi-facebook-box&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a class=&quot;icon p-2&quot; href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;&quot; data-original-title=&quot;Github&quot;&gt;&lt;i class=&quot;zmdi zmdi-github-box&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a class=&quot;icon p-2&quot; href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;&quot; data-original-title=&quot;Linkedin&quot;&gt;&lt;i class=&quot;zmdi zmdi-linkedin-box&quot;&gt;&lt;/i&gt;&lt;/a&gt;
                &lt;a class=&quot;icon p-2&quot; href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;&quot; data-original-title=&quot;Instagram&quot;&gt;&lt;i class=&quot;zmdi zmdi-instagram&quot;&gt;&lt;/i&gt;&lt;/a&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;</code>
                                </div>
                                <div class="mb-5">
                                    <h5>Sign in</h5>
                                    <div class="bg-primary p-4">
                                        <div class="authentication">

                                            <div class="container d-flex flex-column">
                                                
                                                <div class="row align-items-center justify-content-center no-gutters min-vh-100">
                                    
                                                    <div class="col-12 col-md-8 col-lg-6 col-xl-5 py-md-11">
                                    
                                                        <div class="card border-0 shadow-sm">
                                                            <div class="card-body">
                                                                
                                                                <h3 class="text-center">Sign in</h3>
                                    
                                                                
                                                                <p class="text-center mb-6">Make it simple, but significant</p>
                                    
                                                                
                                                                <form class="mb-4 mt-5">
                                                                    
                                                                    <div class="input-group mb-2">
                                                                        <input type="email" class="form-control form-control-lg border-end-0" placeholder="Enter your email">
                                                                        <div class="input-group-append">
                                                                            <span class="input-group-text border-start-0"><i class="zmdi zmdi-email"></i></span>
                                                                        </div>
                                                                    </div>
                                    
                                                                    
                                                                    <div class="input-group mb-4">
                                                                        <input type="password" class="form-control form-control-lg border-end-0" placeholder="Enter your password">
                                                                        <div class="input-group-append">
                                                                            <span class="input-group-text border-start-0"><i class="zmdi zmdi-lock"></i></span>
                                                                        </div>
                                                                    </div>
                                    
                                                                    <div class="form-group d-flex justify-content-between">
                                                                        <label class="c_checkbox">
                                                                            <input type="checkbox">
                                                                            <span class="ms-2 todo_name">Remember me</span>
                                                                            <span class="checkmark"></span>
                                                                        </label>
                                                                        <a class="link" href="../dist/password-reset.html">Reset password</a>
                                                                    </div>
                                    
                                                                    
                                                                    <div class="text-center mt-5">
                                                                        <a href="../dist/index.html" class="btn btn-lg btn-primary" title="">Sign in</a>
                                                                    </div>
                                                                </form>
                                    
                                                                
                                                                <p class="text-center mb-0">Don't have an account yet <a class="link" href="../dist/signup.html">Sign up</a>.</p>
                                                            </div>
                                                        </div>
                                                        
                                                    </div>
                                    
                                                </div> 
                                    
                                            </div>
                                    
                                        </div>
                                    </div>
<pre><code class="language-html">
&lt;div class=&quot;authentication&quot;&gt;

    &lt;div class=&quot;container d-flex flex-column&quot;&gt;
        
        &lt;div class=&quot;row align-items-center justify-content-center no-gutters min-vh-100&quot;&gt;

            &lt;div class=&quot;col-12 col-md-7 col-lg-5 col-xl-4 py-8 py-md-11&quot;&gt;

                &lt;div class=&quot;card border-0 shadow-sm&quot;&gt;
                    &lt;div class=&quot;card-body&quot;&gt;
                        &lt;!-- Heading --&gt;
                        &lt;h3 class=&quot;text-center&quot;&gt;Sign in&lt;/h3&gt;

                        &lt;!-- Text --&gt;
                        &lt;p class=&quot;text-center mb-6&quot;&gt;Make it simple, but significant&lt;/p&gt;

                        &lt;!-- Form --&gt;
                        &lt;form class=&quot;mb-4 mt-5&quot;&gt;
                            &lt;!-- Email --&gt;
                            &lt;div class=&quot;input-group mb-2&quot;&gt;
                                &lt;input type=&quot;email&quot; class=&quot;form-control form-control-lg border-end-0&quot; placeholder=&quot;Enter your email&quot;&gt;
                                &lt;div class=&quot;input-group-append&quot;&gt;
                                    &lt;span class=&quot;input-group-text border-start-0&quot;&gt;&lt;i class=&quot;zmdi zmdi-email&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;

                            &lt;!-- Password --&gt;
                            &lt;div class=&quot;input-group mb-4&quot;&gt;
                                &lt;input type=&quot;password&quot; class=&quot;form-control form-control-lg border-end-0&quot; placeholder=&quot;Enter your password&quot;&gt;
                                &lt;div class=&quot;input-group-append&quot;&gt;
                                    &lt;span class=&quot;input-group-text border-start-0&quot;&gt;&lt;i class=&quot;zmdi zmdi-lock&quot;&gt;&lt;/i&gt;&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;

                            &lt;div class=&quot;form-group d-flex justify-content-between&quot;&gt;
                                &lt;label class=&quot;c_checkbox&quot;&gt;
                                    &lt;input type=&quot;checkbox&quot;&gt;
                                    &lt;span class=&quot;ms-2 todo_name&quot;&gt;Remember me&lt;/span&gt;
                                    &lt;span class=&quot;checkmark&quot;&gt;&lt;/span&gt;
                                &lt;/label&gt;
                                &lt;a class=&quot;link&quot; href=&quot;password-reset.html&quot;&gt;Reset password&lt;/a&gt;
                            &lt;/div&gt;

                            &lt;!-- Submit --&gt;
                            &lt;div class=&quot;text-center mt-5&quot;&gt;
                                &lt;a href=&quot;index.html&quot; class=&quot;btn btn-lg btn-primary&quot; title=&quot;&quot;&gt;Sign in&lt;/a&gt;
                            &lt;/div&gt;
                        &lt;/form&gt;

                        &lt;!-- Text --&gt;
                        &lt;p class=&quot;text-center mb-0&quot;&gt;Don't have an account yet &lt;a class=&quot;link&quot; href=&quot;signup.html&quot;&gt;Sign up&lt;/a&gt;.&lt;/p&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                
            &lt;/div&gt;

            &lt;div class=&quot;signin-img d-none d-lg-block&quot;&gt;
                &lt;img src=&quot;assets/images/signin-img-cyan.svg&quot; alt=&quot;Sign In Image&quot;&gt; 
            &lt;/div&gt;

        &lt;/div&gt; &lt;!-- / .row --&gt;

    &lt;/div&gt;

&lt;/div&gt;</code>
                                </div>

                            </div>
                        </div>
                    </div>

                    
                    <div class="col-12 px-0">
                        <div class="card mb-4" id="Chatbody">
                            <div class="card-header">
                                <h6 class="card-title mb-1 font-weight-bold">Chat Body</h6>
                            </div>
                            <div class="card-body">
                                <div style="overflow-y: auto; height: 450px;">
                                    <ul class="list-unstyled py-4">

                                        
                                        <li class="d-flex message">
                
                                            
                                            <div class="mr-lg-3 me-2">
                                                <img class="avatar sm rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
                                            </div>
                                            
                
                                            <div class="message-body">
                                                <span class="date-time text-muted">Jason, 7:19 PM</span>
                
                                                <div class="message-row d-flex align-items-center">
                
                                                    
                                                    <div class="message-content p-3">
                                                        Hello, <br> How are you?
                                                    </div>
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted ms-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                </div>
                                            </div>
                
                                        </li>
                
                                         
                                         <li class="d-flex message">
                
                                            
                                            <div class="mr-lg-3 me-2">
                                                <img class="avatar sm rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
                                            </div>
                                            
                
                                            <div class="message-body">
                                                <span class="date-time text-muted">Jason, 7:19 PM</span>
                
                                                <div class="message-row d-flex align-items-center">
                
                                                    
                                                    <div class="message-content p-3">
                                                        Hello, please find attachment, let me know if any changes.
                                                        <div class="attachment">
                                                            <div class="media mt-2">
                                                                <div class="avatar me-2">
                                                                    <div class="avatar rounded no-image orange">
                                                                        <i class="zmdi zmdi-collection-pdf"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="media-body overflow-hidden">
                                                                    <h6 class="text-truncate mb-0">Design file.pdf</h6>
                                                                    <span class="file-size">2.7 mb</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted ms-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                </div>
                
                                            </div>
                
                                        </li>
                
                                        
                                        <li class="d-flex message divider mt-xl-5 mt-md-3 mb-xl-5 mb-md-3">
                                            <small class="text-muted">Sunday</small>
                                        </li>
                                        
                
                                        
                                        <li class="d-flex message right">
                
                                            <div class="message-body">
                                                <span class="date-time text-muted">7:19 PM <i class="zmdi zmdi-check-all text-primary"></i></span>
                
                                                <div class="message-row d-flex align-items-center justify-content-end">
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted me-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                    
                                                    <div class="message-content border p-3">
                                                        It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                                                    </div>
                
                                                </div>
                                            </div>
                
                                        </li>
                
                                        
                                        <li class="d-flex message">
                
                                            
                                            <div class="mr-lg-3 me-2">
                                                <img class="avatar sm rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
                                            </div>
                                            
                
                                            <div class="message-body">
                                                <span class="date-time text-muted">Jason, 7:19 PM</span>
                
                                                <div class="message-row d-flex align-items-center">
                
                                                    
                                                    <div class="message-content p-3">
                                                        Okay, All the Lorem Ipsum generators on the Internet
                                                    </div>
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted ms-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                </div>
                                            </div>
                
                                        </li>
                
                                        
                                        <li class="d-flex message right">
                
                                            <div class="message-body">
                                                <span class="date-time text-muted">7:19 PM <i class="zmdi zmdi-check-all text-primary"></i></span>
                
                                                <div class="message-row d-flex align-items-center justify-content-end">
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted me-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                    
                                                    <div class="message-content border p-3">
                                                        Hello, David
                                                    </div>
                
                                                </div>
                                                <div class="message-row d-flex align-items-center justify-content-end">
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted me-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                    
                                                    <div class="message-content border p-3">
                                                        We have send some project shot, please review
                                                        <div class="attachment right-file">
                                                            <img class="rounded mt-1" src="../dist/assets/images/image-file/one-page-work-1.jpg" alt="">
                                                            <img class="rounded mt-1" src="../dist/assets/images/image-file/one-page-work-2.jpg" alt="">
                                                            <img class="rounded mt-1" src="../dist/assets/images/image-file/one-page-work-3.jpg" alt="">
                                                        </div>
                                                    </div>
                
                                                </div>
                                            </div>
                
                                        </li>
                
                                        
                                        <li class="d-flex message">
                
                                            
                                            <div class="mr-lg-3 me-2">
                                                <img class="avatar sm rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
                                            </div>
                                            
                
                                            <div class="message-body">
                                                <span class="date-time text-muted">Jason, 7:19 PM</span>
                
                                                <div class="message-row d-flex align-items-center">
                
                                                    
                                                    <div class="message-content p-3">
                                                        Okay,
                                                    </div>
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted ms-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                </div>
                                                <div class="message-row d-flex align-items-center">
                
                                                    
                                                    <div class="message-content p-3">
                                                        Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.
                                                    </div>
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted ms-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                </div>
                                                <div class="message-row d-flex align-items-center">
                
                                                    
                                                    <div class="message-content p-3">
                                                        <div class="attachment">
                                                            <div class="media mt-2">
                                                                <div class="avatar me-2">
                                                                    <div class="avatar rounded no-image cyan">
                                                                        <i class="zmdi zmdi-file"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="media-body overflow-hidden">
                                                                    <h6 class="text-truncate mb-0">Design file.psd</h6>
                                                                    <span class="file-size">22.5 mb</span>
                                                                </div>
                                                            </div>
                                                            <div class="media mt-2">
                                                                <div class="avatar me-2">
                                                                    <div class="avatar rounded no-image green">
                                                                        <i class="zmdi zmdi-file-text"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="media-body overflow-hidden">
                                                                    <h6 class="text-truncate mb-0">Project detail.doc</h6>
                                                                    <span class="file-size">2.8 mb</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted ms-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu dropdown-menu-right">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                </div>
                
                                            </div>
                
                                        </li>
                
                                        
                                        <li class="d-flex message divider mt-xl-5 mt-md-3 mb-xl-5 mb-md-3">
                                            <small class="text-muted">Today</small>
                                        </li>
                                        
                
                                        
                                        <li class="d-flex message right">
                
                                            <div class="message-body">
                                                <span class="date-time text-muted">7:19 PM <i class="zmdi zmdi-check-all text-primary"></i></span>
                                                
                                                <div class="message-row d-flex align-items-center justify-content-end">
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted me-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                    
                                                    <div class="message-content border p-3">
                                                        If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
                                                    </div>
                
                                                </div>
                                                <div class="message-row d-flex align-items-center justify-content-end">
                
                                                    
                                                    <div class="dropdown">
                                                        <a class="text-muted me-1 p-2 text-muted" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                            <i class="zmdi zmdi-more-vert"></i>
                                                        </a>
                                                        <div class="dropdown-menu">
                                                            <a class="dropdown-item" href="#">Edit</a>
                                                            <a class="dropdown-item" href="#">Share</a>
                                                            <a class="dropdown-item" href="#">Delete</a>
                                                        </div>
                                                    </div>
                                                    
                
                                                    
                                                    <div class="message-content border p-3">
                                                        <div class="attachment right-file">
                                                            <div class="media mt-2">
                                                                <div class="avatar me-2">
                                                                    <div class="avatar rounded no-image red">
                                                                        <i class="zmdi zmdi-videocam"></i>
                                                                    </div>
                                                                </div>
                                                                <div class="media-body overflow-hidden">
                                                                    <h6 class="text-truncate mb-0">Animation logo.aep</h6>
                                                                    <span class="file-size">47.2 mb</span>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                
                                                </div>
                
                                            </div>
                
                                        </li>
                
                                        
                                        <li class="d-flex message">
                
                                            
                                            <div class="mr-lg-3 me-2">
                                                <img class="avatar sm rounded-circle" src="../dist/assets/images/xs/avatar5.jpg" alt="avatar">
                                            </div>
                                            
                
                                            <div class="message-body">
                
                                                <div class="message-row d-flex align-items-center">
                
                                                    
                                                    <div class="message-content p-3">
                                                        <div class="wave">
                                                            <span class="dot"></span>
                                                            <span class="dot"></span>
                                                            <span class="dot"></span>
                                                        </div>
                                                    </div>
                
                                                </div>
                
                                            </div>
                
                                        </li>
                
                                    </ul>
                                </div>
<pre><code class="language-html">
&lt;ul class=&quot;list-unstyled py-4&quot;&gt;

    &lt;!-- Message: Left --&gt;
    &lt;li class=&quot;d-flex message&quot;&gt;

        &lt;!-- Avatar --&gt;
        &lt;div class=&quot;mr-lg-3 me-2&quot;&gt;
            &lt;img class=&quot;avatar sm rounded-circle&quot; src=&quot;../dist/assets/images/xs/avatar5.jpg&quot; alt=&quot;avatar&quot;&gt;
        &lt;/div&gt;
        &lt;!-- End Avatar --&gt;

        &lt;div class=&quot;message-body&quot;&gt;
            &lt;span class=&quot;date-time text-muted&quot;&gt;Jason, 7:19 PM&lt;/span&gt;

            &lt;div class=&quot;message-row d-flex align-items-center&quot;&gt;

                &lt;!-- Message: content --&gt;
                &lt;div class=&quot;message-content p-3&quot;&gt;
                    Hello, &lt;br&gt; How are you?
                &lt;/div&gt;

                &lt;!-- Message: dropdown --&gt;
                &lt;div class=&quot;dropdown&quot;&gt;
                    &lt;a class=&quot;text-muted ms-1 p-2 text-muted&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                        &lt;i class=&quot;zmdi zmdi-more-vert&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                    &lt;div class=&quot;dropdown-menu dropdown-menu-right&quot;&gt;
                        &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Edit&lt;/a&gt;
                        &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Share&lt;/a&gt;
                        &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Delete&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- End Message: dropdown --&gt;

            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/li&gt;

    &lt;!-- Message: Divider --&gt;
    &lt;li class=&quot;d-flex message divider mt-xl-5 mt-md-3 mb-xl-5 mb-md-3&quot;&gt;
        &lt;small class=&quot;text-muted&quot;&gt;Sunday&lt;/small&gt;
    &lt;/li&gt;
    &lt;!-- End message divider --&gt;

    &lt;!-- Message: Right--&gt;
    &lt;li class=&quot;d-flex message right&quot;&gt;

        &lt;div class=&quot;message-body&quot;&gt;
            &lt;span class=&quot;date-time text-muted&quot;&gt;7:19 PM &lt;i class=&quot;zmdi zmdi-check-all text-primary&quot;&gt;&lt;/i&gt;&lt;/span&gt;

            &lt;div class=&quot;message-row d-flex align-items-center justify-content-end&quot;&gt;

                &lt;!-- Message: dropdown --&gt;
                &lt;div class=&quot;dropdown&quot;&gt;
                    &lt;a class=&quot;text-muted me-1 p-2 text-muted&quot; href=&quot;#&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
                        &lt;i class=&quot;zmdi zmdi-more-vert&quot;&gt;&lt;/i&gt;
                    &lt;/a&gt;
                    &lt;div class=&quot;dropdown-menu&quot;&gt;
                        &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Edit&lt;/a&gt;
                        &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Share&lt;/a&gt;
                        &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Delete&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;!-- End Message: dropdown --&gt;

                &lt;!-- Message: content --&gt;
                &lt;div class=&quot;message-content border p-3&quot;&gt;
                    It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
                &lt;/div&gt;

            &lt;/div&gt;
        &lt;/div&gt;

    &lt;/li&gt;

    &lt;!-- Message: Left Typing --&gt;
    &lt;li class=&quot;d-flex message&quot;&gt;

        &lt;!-- Avatar --&gt;
        &lt;div class=&quot;mr-lg-3 me-2&quot;&gt;
            &lt;img class=&quot;avatar sm rounded-circle&quot; src=&quot;../dist/assets/images/xs/avatar5.jpg&quot; alt=&quot;avatar&quot;&gt;
        &lt;/div&gt;
        &lt;!-- End Avatar --&gt;

        &lt;div class=&quot;message-body&quot;&gt;

            &lt;div class=&quot;message-row d-flex align-items-center&quot;&gt;

                &lt;!-- Message: content --&gt;
                &lt;div class=&quot;message-content p-3&quot;&gt;
                    &lt;div class=&quot;wave&quot;&gt;
                        &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                        &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                        &lt;span class=&quot;dot&quot;&gt;&lt;/span&gt;
                    &lt;/div&gt;
                &lt;/div&gt;

            &lt;/div&gt;

        &lt;/div&gt;

    &lt;/li&gt;

&lt;/ul&gt;
</code></pre>
                            </div>
                        </div>
                    </div>

                    
                    <div class="col-12 px-0">
                        <div class="card mb-4" id="Credits">
                            <div class="card-header">
                                <h6 class="card-title mb-1 font-weight-bold">Credits</h6>
                            </div>
                            <div class="card-body">
                                <table class="table mb-0">
                                    <tbody>
                                        <tr>
                                            <td>Bootstrap 4x</td>
                                            <td><a target="_blank" href="https://getbootstrap.com/">http://getbootstrap.com/</a></td>
                                        </tr>
                                        <tr>
                                            <td>Jquery</td>
                                            <td><a target="_blank" href="https://jquery.com/">https://jquery.com/</a></td>
                                        </tr>
                                        <tr>
                                            <td>Gulp</td>
                                            <td><a target="_blank" href="https://gulpjs.com/">https://gulpjs.com/</a></td>
                                        </tr>
                                        <tr>
                                            <td>Grunt</td>
                                            <td><a target="_blank" href="https://gruntjs.com/">https://gruntjs.com/</a></td>
                                        </tr>
                                        <tr>
                                            <td>Node Js</td>
                                            <td><a target="_blank" href="https://nodejs.org/en/download/">https://nodejs.org/en/download/</a></td>
                                        </tr>
                                        <tr>
                                            <td>Google fonts ( Nunito ): </td>
                                            <td><a target="_blank" href="https://fonts.google.com/specimen/Nunito">https://fonts.google.com/specimen/Nunito</a></td>
                                        </tr>
                                        <tr>
                                            <td>Material Icon Font</td>
                                            <td><a target="_blank" href="https://zavoloklom.github.io/material-design-iconic-font/icons.html">https://zavoloklom.github.io/material-design-iconic-font/icons.html</a></td>
                                        </tr>
                                        <tr>
                                            <td>All Images are used</td>
                                            <td>
                                                <p class="mb-1"><a target="_blank" href="https://www.pexels.com/">https://www.pexels.com/</a></p>
                                                <p class="mb-1"><a target="_blank" href="https://undraw.co/">https://undraw.co/</a></p>
                                                <p class="mb-0"><a target="_blank" href="https://www.freepik.com/">https://www.freepik.com/</a></p>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Full Calendar</td>
                                            <td><a target="_blank" href="https://fullcalendar.io/">https://fullcalendar.io/</a></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    
                    <div class="col-12 px-0">
                        <div class="card mb-4" id="CustomerSupport">
                            <div class="card-header">
                                <h6 class="card-title mb-1 font-weight-bold">Customer Support</h6>
                            </div>
                            <div class="card-body">
                                <p>You can request for support via email or GetBootstrap item comments.</p>
                                <p>We will assist you any problem you encounter while building your Chat App via this template</p>
                                <p>We use request help form in comments and email to manage customer support. Soon, as we grow, we will invest and find the best customer support system we can use to serve you better. For the meantime, submit a help request to the link given for any issues and concerns that you have. Don't worry, we will respond to you as quickly as we can. Thank you.</p>
                                <p class="text-info">© 2020. POSTMAN : Chat App Documentation v1.0.0. All Rights Reserved.</p>
                                <h4>Created by: PuffinTheme</h4>
                            </div>
                        </div>
                    </div>

                    
                    <div class="col-12 px-0">
                        <div class="card mb-4" id="ChangeLog">
                            <div class="card-header">
                                <h6 class="card-title mb-1 font-weight-bold">Change Log</h6>
                            </div>
                            <div class="card-body">
                                <table class="table mb-0">
                                    <tbody>
                                        <tr>
                                            <td style="width: 120px;">Version 1.0.0</td>
                                            <td style="width: 120px;"><span class="badge badge-primary badge-pill">07 Sept 2020</span></td>
                                            <td>
                                                -- Initial Release
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
        
        
    </div>
    

    
    <div class="modal fade" id="InviteFriends" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Invite New Friends</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label>Email address</label>
                            <input type="email" class="form-control">
                            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                        </div>
                    </form>
                    <div class="mt-5">
                        <button type="button" class="btn btn-primary">Send Invite</button>
                        <button type="button" class="btn btn-link" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

</div>



<script type="text/javascript" src="../dist/assets/vendor/jquery/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="../dist/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>


<script type="text/javascript" src="../dist/assets/vendor/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>


<script type="text/javascript" src="../js/template.js"></script>
<script type="text/javascript" src="../doc/prism.js"></script>

</body>
</html>
